<template>
    <div class="fullscreen" :class="{allscreen:status==1}" id="fullscreen" ref="fullscreen">
        <div class="title">
            <p>{{ this.$store.state.projectName }}家庭医生签约服务进展概览</p>
            <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
            >
            <img
                src="./../../assets/images/Screen.png"
                class="btn"
                @click="fullScreen()"
                v-show="bigscreen"
                alt="全屏"
            />
            <img
                src="./../../assets/images/outScreen.png"
                class="btn"
                @click="exitFullscreen()"
                v-show="!bigscreen"
                alt="退出全屏"
            />
        </div>
        <div class="content">
            <div class="cont_left">
                <div class="interval">
                    <p>
                        <img
                            src="./../../assets/images/caption.png"
                            alt=""
                        />机构家庭医生签约进度情况
                    </p>
                    <basicChart :chartOption="chartOptionBar" />
                </div>
                <div class="interval">
                    <p>
                        <img
                            src="./../../assets/images/caption.png"
                            alt=""
                        />机构家庭医生资源配置情况
                    </p>
                    <basicChart
                        :chartOption="chatStackbar"
                        style="margin: -8% 0 0 0"
                    />
                </div>
            </div>
            <div class="cont_center">
                <div class="number">
                    <li>
                        <p>{{ alwaysNum }} 人</p>
                        <span>常驻人口总数</span>
                    </li>
                    <li>
                        <p>{{ signingNum }} 份</p>
                        <span>常驻人口签约数</span>
                    </li>
                    <li>
                        <p>{{ signingRatio }} %</p>
                        <span>常驻人口签约率</span>
                    </li>
                    <li>
                        <p>{{ mainNum }} 份</p>
                        <span>重点人群已签约数</span>
                    </li>
                    <li>
                        <p>{{ mainRatio }} %</p>
                        <span>重点人群签约率</span>
                    </li>
                </div>
                <div class="map">
                    <Map></Map>
                </div>
            </div>
            <div class="cont_right">
                <div class="interval">
                    <p>
                        <img src="./../../assets/images/caption.png" alt="" />
                        家庭医生签约人群占比分析
                    </p>
                    <basicChart :chartOption="pie" />
                </div>
                <div class="interval">
                    <p>
                        <img
                            src="./../../assets/images/caption.png"
                            alt=""
                        />家庭医生履约服务分析
                    </p>
                    <basicChart :chartOption="reder" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import { formatTime } from "@/commons/function.js";
import basicChart from "@/components/echarts/basicChart";
import Map from "@/components/echarts/map";
export default {
    components: {
        basicChart,
        Map,
    },
    data() {
        return {
            status:0,
            chartOptionBar: {
                tooltip: {
                    show: false,
                    trigger: "item",
                },
                maxNum: 0,
                grid: {
                    top: "10%",
                    right: "10%",
                    left: "10%",
                    bottom: "10%",
                    containLabel: true,
                },
                xAxis: {
                    show: false,
                },
                yAxis: {
                    data: [],
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#fff",
                        fontSize: 12,
                        interval: 0,
                        rotate: 40,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: false,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 15,
                        zlevel: 2,
                        data: [],
                        label: {
                            show: true,
                            position: "insideRight",
                            align: 'right',
                            formatter: function (params) {
                                var percent = params.data + "%";
                                return percent;
                            },
                            color: "#fff",
                            fontSize: 8,
                        },
                        itemStyle: {
                            barBorderRadius: [20, 20],
                            color: new echarts.graphic.LinearGradient(
                                0,
                                1,
                                1,
                                1,
                                [
                                    { offset: 0, color: "#395CFE" },
                                    { offset: 1, color: "#2EC7CF" },
                                ]
                            ),
                        },
                    },
                    {
                        type: "bar",
                        barWidth: 15,
                        barGap: "-100%",
                        data: [100, 100, 100, 100, 100, 100, 100, 100],
                        itemStyle: {
                            barBorderRadius: [20, 20],
                            color: "rgba(3,169,244, 0.5)",
                        },
                    },
                ],
            },
            chatStackbar: {
                color: ["#5087ec", "#68bbc4", "#58a55c", "#f2bd42"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    backgroundColor: "rgba(22,62,166,0.9)",
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                    axisLabel: {
                        formatter: "{value}",
                        color: "#fff",
                        fontSize: 12,
                    },
                },

                yAxis: {
                    type: "category",
                    data: [],
                    axisLabel: {
                        formatter: "{value}",
                        color: "#fff",
                        fontSize: 12,
                        interval: 0,
                        rotate: 40,
                    },
                },
                series: [
                    {
                        name: "负责人",
                        type: "bar",
                        stack: "total",
                        barWidth: 15,
                        label: {
                            show: true,
                        },
                        emphasis: {
                            focus: "series",
                        },
                        data: [],
                    },
                    {
                        name: "护士",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: true,
                        },
                        emphasis: {
                            focus: "series",
                        },
                        data: [],
                    },
                    {
                        name: "村医",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: true,
                        },
                        emphasis: {
                            focus: "series",
                        },
                        data: [],
                    },
                    {
                        name: "全科",
                        type: "bar",
                        stack: "total",
                        label: {
                            show: true,
                        },
                        emphasis: {
                            focus: "series",
                        },
                        data: [],
                    },
                ],
            },
            pie: {
                color: ["#5087ec", "#68bbc4", "#58a55c", "#f2bd42", "#ee752f"],
                itemStyle: {
                    borderRadius: 30,
                    borderColor: "#fff",
                    borderWidth: 1,
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(22,62,166,0.9)",
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                    show: false,
                },
                series: [
                    {
                        // name: "占比",
                        type: "pie",
                        radius: ["55", "80"],
                        avoidLabelOverlap: false,
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 5,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            },
            reder: {
                legend: {
                    show: false,
                },
                radar: {
                    indicator: [
                        { name: "接诊服务", max: null },
                        { name: "上门服务", max: null },
                        { name: "集中服务", max: null },
                        { name: "电话服务", max: null },
                        { name: "信息化服务", max: null },
                    ],
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: [
                                "rgba(12,62,129,0)",
                                "rgba(12,62,129,0.3)",
                                "rgba(12,62,129,0)",
                                "rgba(12,62,129,0)",
                            ],
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(22,62,166,0.9)",
                },
                series: [
                    {
                        type: "radar",
                        data: [
                            {
                                value: [],
                                name: "数据",
                                itemStyle: {
                                    color: "#0066CC",
                                },
                                areaStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.1,
                                        0.6,
                                        1,
                                        [
                                            {
                                                color: "rgba(0, 51, 153, 0.1)",
                                                offset: 0,
                                            },
                                            {
                                                color: "rgba(0, 102, 204, 0.9)",
                                                offset: 1,
                                            },
                                        ]
                                    ),
                                },
                            },
                        ],
                    },
                ],
            },
            dataMax: null,
            clinicalNum: null,
            doorNum: null,
            focusNum: null,
            infoNum: null,
            phoneNum: null,
            alwaysNum: 0,
            doctorNum: 0,
            mainNum: 0,
            mainRatio: 0,
            signingNum: 0,
            signingRatio: 0,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: [
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
            ],
            bigscreen: true,
        };
    },
    created() {
        this.getSigningStatistics();
        this.getDoctorConfigStatistics();
        this.getqueryStatistics();
        this.getSigningRatio();
        this.getPerformanceStatistics();
        console.log(this.$route.name)
        if(this.$route.name == 'bigoverview'){
            this.status = 1
        }
    },
    mounted() {
        this.timeFn();
    },
    methods: {
        fullScreen() {
            window.open( window.location.protocol+"//"+window.location.host + '/operate/#/statisticaloverviewscreen');
            //全屏
            // this.bigscreen = false;
            // var full = document.getElementById("fullscreen");
            // this.launchIntoFullscreen(full);
        },
        //全屏封装
        launchIntoFullscreen(full) {
            if (full.requestFullscreen) {
                full.requestFullscreen();
            } else if (full.mozRequestFullScreen) {
                full.mozRequestFullScreen();
            } else if (full.webkitRequestFullscreen) {
                full.webkitRequestFullscreen();
            } else if (full.msRequestFullscreen) {
                full.msRequestFullscreen();
            }
        },
        //退出全屏
        exitFullscreen() {
            this.bigscreen = true;
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        },
        timeFn() {
            setInterval(() => {
                this.dateDay = formatTime(new Date(), "HH: mm: ss");
                this.dateYear = formatTime(new Date(), "yyyy年MM月dd日");
                this.dateWeek = this.weekday[new Date().getDay()];
            }, 1000);
        },
        getSigningStatistics() {
            this.$axios
                .post(api.querySigningStatistics, {})
                .then((res) => {
                    if (res.data.code === 1) {
                        this.chartOptionBar.yAxis.data = res.data.object.yList;
                        this.chartOptionBar.series[0].data =
                            res.data.object.xList;
                    }
                })
                .catch(() => {});
        },
        getDoctorConfigStatistics() {
            this.$axios
                .post(api.queryDoctorConfigStatistics, {})
                .then((res) => {
                    if (res.data.code === 1) {
                        this.chatStackbar.yAxis.data = res.data.object.yList;
                        this.chatStackbar.series[0].data =
                            res.data.object.teamMainList;
                        this.chatStackbar.series[1].data =
                            res.data.object.nurseList;
                        this.chatStackbar.series[2].data =
                            res.data.object.villageList;
                        this.chatStackbar.series[3].data =
                            res.data.object.doctorList;
                    }
                })
                .catch(() => {});
        },
        getSigningRatio() {
            this.$axios
                .post(api.SigningRatio, {})
                .then((res) => {
                    if (res.data.code === 1) {
                        this.pie.series[0].data = res.data.object;
                    }
                })
                .catch(() => {});
        },
        getPerformanceStatistics() {
            this.$axios
                .post(api.queryPerformanceStatistics, {})
                .then((res) => {
                    if (res.data.code === 1) {
                        let that = this;
                        let total = parseInt(
                            res.data.object.clinicalNum +
                                res.data.object.doorNum +
                                res.data.object.focusNum +
                                res.data.object.infoNum +
                                res.data.object.phoneNum
                        );
                        let arr = [
                            res.data.object.clinicalNum,
                            res.data.object.doorNum,
                            res.data.object.focusNum,
                            res.data.object.phoneNum,
                            res.data.object.infoNum,
                        ];
                        that.reder.radar.indicator.map((i) => {
                            i.max = total;
                        });
                        that.reder.series[0].data[0].value = arr;
                    }
                })
                .catch(() => {});
        },
        getqueryStatistics() {
            this.$axios
                .post(api.queryStatistics,{})
                .then((res) => {
                    if (res.data.code === 1) {
                        console.log(res.data.object)
                        let parameters = res.data.object[0];
                        this.alwaysNum = parameters.alwaysNum;
                        this.mainNum = parameters.mainNum;
                        this.mainRatio = parameters.mainRatio;
                        this.signingNum = parameters.signingNum;
                        this.signingRatio = parameters.signingRatio;
                    }
                })
                .catch(() => {});
        },
    },
};
</script>
<style lang="less" scoped>
.allscreen{
   position:absolute;
   left: 0;
}
.fullscreen {
    width: 100%;
    height: 100%;
    padding: 10px;
    background-image: url("./../../assets/images/pageBgt.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pageBgt.jpg',sizingMethod='scale');
    .title {
        width: 100%;
        height: 80px;
        text-align: center;
        line-height: 70px;
        background-image: url("./../../assets/images/title.png");
        background-size: 100% 80px;
        background-repeat: no-repeat;
        .text {
            position: relative;
            top: -50px;
            font-size: 0.85rem;
            left: 41%;
            color: #fff;
        }
        .btn {
            width: 25px;
            height: 25px;
            position: relative;
            top: -52px;
            left: 42%;
            cursor: pointer;
            color: #fff;
        }
        p {
            font-size: 1.25rem;
            color: #fff;
            letter-spacing: 1px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #d0e4ff;
            text-shadow: 0px 6px 3px #0f0f0f;
            text-align: center;
            margin-left: 17px;
        }
    }
    .content {
        width: 100%;
        display: flex;
        .interval {
            width: 100%;
            height: 330px;
            margin: 0 0 5% 0;
            padding: 20px 0 0 0;
            background-image: url("./../../assets/images/box.png");
            background-size: 100% 330px;
            background-repeat: no-repeat;
            p {
                font-weight: bold;
                color: #d0e4ff;
                font-size: 16px;
                text-shadow: 0px 6px 3px #0f0f0f;
                margin: 0 0 0 20px;
                img {
                    width: 15px;
                    height: 22px;
                    margin: 0 5px 0 0;
                }
            }
        }
        .cont_left {
            width: 27%;
            height: 80%;
        }
        .cont_center {
            width: 40%;
            height: 80%;
            margin: 0 3%;
            .number {
                width: 100%;
                display: flex;
                li {
                    width: 19%;
                    height: 6.5vh;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 5px;
                    margin: 0 1% 0 0;
                    background: rgba(5, 65, 149, 0.6);
                    text-align: center;
                    box-shadow: 0 3px 12px 0 rgba(39, 54, 75, 0.6);
                    p {
                        font-size: 0.85rem;
                        font-family: DIN;
                        font-weight: bold;
                        background: linear-gradient(
                            0deg,
                            #00a8ff 0%,
                            #8fdffe 100%
                        );
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        margin: 10px 0 0 0;
                    }
                    span {
                        font-size: 0.6rem;
                        font-weight: 500;
                        font-family: PingFang SC;
                    }
                }
            }
            .map {
                width: 99%;
                height: 35.8rem;
                color: #fff;
                padding: 1rem 0 0 0;
                border-radius: 5px;
                background: rgba(5, 65, 149, 0.6);
                box-shadow: 0 3px 12px 0 rgba(39, 54, 75, 0.6);
                margin: 5% 0 0 0;
            }
        }
        .cont_right {
            width: 27%;
            height: 80%;
        }
    }
}
</style>